<template>
  <div>
    <div class='control-box'>
      <!-- control 操作区 START -->
      <e-control
        :search-form-options='searchFormOptions'
        :search-label-width='searchLabelWidth'
        :search-refresh-show='searchRefreshShow'
        :btns='controlBtns'
        :search-show='searchShow'
        :operation-show='operationShow'
        @on-search='searchControlHandle'
        @on-refresh='refreshControlHandle'
        @change-height='changeControlHeight'
        @on-insert='insertControlHandle'
        @on-delete='deleteControlHandle'
        v-bind='$attrs'
      ></e-control>
      <!-- control 操作区 END -->
    </div>
    <div class='table-box'>
      <!-- table 数据表格 START -->
      <e-table
        :data='tableData'
        :columns='tableColumns'
        stripe
        border
        :max-height='tableMaxHeight'
        style='width: 100%'
        @selection-change='changeTableSelectData'
        :current='pageData.pageNum'
        :total='pageData.total'
        @page-size-change='changePageSize'
        @page-current-change='changePageCurrent'
      >
        <template v-slot:operation="{ scope }">
          <el-button
            v-if='tableBtnType === 1 || tableBtnType === 2'
            @click='updateTableHandle(scope.row)'
            type='warning'
            size='mini'
            plain
            >编辑</el-button
          >
          <el-button
            v-if='tableBtnType === 1 || tableBtnType === 3'
            @click='deleteTableHandle(scope.row)'
            type='danger'
            size='mini'
            plain
            >删除</el-button
          >
          <template v-if='operationBtn'>
            <el-button
              v-for='(item, index) in operationBtn'
              :key='index'
              :icon='item.icon ? `el-icon-${item.icon}` : ""'
              v-bind='item.props'
              size='mini'
              @click='forwardEvent(item.event, scope.row)'
              >{{ item.title }}</el-button
            >
          </template>
        </template>
      </e-table>
      <!-- table 数据表格 END -->
    </div>
    <!-- editDialog 编辑弹窗 START -->
    <el-dialog
      :title='editDialogTitle'
      v-model='editDialogShow'
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      width='50%'
    >
      <e-form
        ref='dialogForm'
        :form-options='dialogFormOptions'
        :form-label-width='dialogFormLabelWidth'
        :form-rules='dialogFormRules'
        :form-data-current='dialogFormCurrent'
      ></e-form>
      <template v-slot:footer>
        <span class='dialog-footer'>
          <el-button @click='cancelDialogDataHandle'>取 消</el-button>
          <el-button type='primary' @click='saveDialogDataHandle'
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- editDialog 编辑弹窗 END -->
  </div>
</template>

<script>
import eControl from '@/components/e-control';
import eForm from '@/components/e-form';
export default {
  name: 'e-manage',
  components: {
    eControl,
    eForm
  },
  props: {
    // 搜索区是否显示
    searchShow: {
      type: Boolean,
      default: true
    },
    // 操作区是否显示
    operationShow: {
      type: Boolean,
      default: true
    },
    // 查询条件
    searchFormOptions: {
      type: Array,
      default() {
        return [];
      }
    },
    // 查询区表单label宽度
    searchLabelWidth: {
      type: String,
      default: '80px'
    },
    // 查询区是否展示重置按钮
    searchRefreshShow: {
      type: Boolean,
      default: true
    },
    // 操作按钮
    controlBtns: {
      type: Array,
      default() {
        return [];
      }
    },
    // 表格列
    tableColumns: {
      type: Array,
      default() {
        return [];
      }
    },
    // 表格按钮完全自定义,0:不显示;1:显示所有;2:显示编辑;3:显示删除;
    tableBtnType: {
      type: Number,
      default: 1
    },
    // 编辑框表单
    dialogFormOptions: {
      type: Array,
      default() {
        return [];
      }
    },
    dialogFormLabelWidth: {
      type: String,
      default: '80px'
    },
    // 编辑框验证
    dialogFormRules: {
      type: Object,
      default() {
        return {};
      }
    },
    // 接口地址
    interFace: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      // 编辑框是否展示
      editDialogShow: false,
      // 编辑框类型 0:新增;1:修改;
      editDialogType: 0,
      // 编辑框表单数据
      dialogFormCurrent: {},
      // 查询表单
      searchFormData: {},
      // 控制区高度
      controlHeight: 0,
      // 表格数据
      tableData: [],
      // 分页数据
      pageData: {
        // 当前分页
        pageNum: 1,
        // 分页条数
        pageSize: 10,
        // 数据总数
        total: 0
      },
      // 表格选中数据
      tableSelectData: []
    };
  },
  watch: {},
  computed: {
    // 组合查询条件和分页
    searchData() {
      const { pageNum, pageSize } = this.pageData;
      return { ...this.searchFormData, size: pageSize, current: pageNum };
      // return Object.assign(this.searchFormData,{size: pageSize},{current:pageNum})
    },
    // 表单实例
    dialogForm() {
      return this.$refs.dialogForm;
    },
    // 表格最大高度
    tableMaxHeight() {
      return window.innerHeight - this.controlHeight - 160;
    },
    // 编辑框标题
    editDialogTitle() {
      return this.editDialogType === 0 ? '新增' : '编辑';
    },
    // 操作列自定义按钮
    operationBtn() {
      let btns;
      this.tableColumns.map(item => {
        if (item.slotName === 'operation') {
          btns = item.btns || [];
        }
      });
      return btns;
    }
  },
  methods: {
    /**
     * @functionName init
     * @description 页面初始化
     * @author 张航
     * @date 2020-09-09 08:40:06
     * @version V1.0.0
     */
    init() {
      this.getTableData();
    },
    /**
     * @functionName searchControlHandle
     * @param {Object} data 查询参数
     * @description 查询
     * @author 张航
     * @date 2020-09-08 15:01:26
     * @version V1.0.0
     */
    searchControlHandle(data) {
      this.searchFormData = data;
      this.refreshPageCurrent();
    },
    /**
     * @functionName refreshControlHandle
     * @param {Object} data 重置后的数据
     * @description 重置查询条件
     * @author 张航
     * @date 2020-09-08 17:01:51
     * @version V1.0.0
     */
    refreshControlHandle(data) {
      console.log(data);
      this.searchFormData = data;
    },
    /**
     * @functionName changeControlHeight
     * @param {String} height 控制区占用高度
     * @description 控制区高度变化
     * @author 张航
     * @date 2020-09-16 16:17:07
     * @version V1.0.0
     */
    changeControlHeight(height) {
      this.controlHeight = height;
    },
    /**
     * @functionName insertControlHandle
     * @description 点击新增按钮
     * @author 张航
     * @date 2020-09-08 17:35:28
     * @version V1.0.0
     */
    insertControlHandle() {
      this.openDialog();
    },
    /**
     * @functionName deleteControlHandle
     * @description 点击删除按钮
     * @author 张航
     * @date 2020-09-08 17:38:28
     * @version V1.0.0
     */
    deleteControlHandle() {
      if (this.checkTableSelectData()) {
        const ids = [];
        this.tableSelectData.map(item => {
          if (item && item.id) {
            ids.push(item.id);
          }
        });
        console.log(ids);
        this.deleteTableHandle({ id: ids });
      }
    },
    /**
     * @functionName changeTableSelectData
     * @param {Array} rows 选中数据
     * @description 表格选中数据改变
     * @author 张航
     * @date 2020-09-08 17:52:12
     * @version V1.0.0
     */
    changeTableSelectData(rows) {
      this.tableSelectData = rows;
    },
    /**
     * @functionName checkTableSelectData
     * @return {Number} 返回结果
     * @description 方法描述
     * @author 张航
     * @date 2020-09-10 09:58:59
     * @version V1.0.0
     */
    checkTableSelectData() {
      if (this.tableSelectData.length === 0) {
        this.$alert('至少选择一条数据！', '提示', {
          confirmButtonText: '确定'
        });
      }
      return this.tableSelectData.length;
    },
    /**
     * @functionName changePageSize
     * @param {Number} size 分页条数
     * @description 修改分页条数
     * @author 张航
     * @date 2020-09-08 17:57:06
     * @version V1.0.0
     */
    changePageSize(size) {
      this.pageData.pageSize = size;
      this.getTableData();
    },
    /**
     * @functionName changePageCurrent
     * @param {Number} current 当前分页
     * @description 修改当前分页
     * @author 张航
     * @date 2020-09-08 18:02:03
     * @version V1.0.0
     */
    changePageCurrent(current) {
      this.pageData.pageNum = current;
      this.getTableData();
    },
    /**
     * @functionName refreshPageCurrent
     * @description 重置当前分页
     * @author 张航
     * @date 2020-09-22 10:45:57
     * @version V1.0.0
     */
    refreshPageCurrent() {
      this.pageData.pageNum = 1;
      this.getTableData();
    },
    /**
     * @functionName getTableData
     * @description 获取表格数据
     * @author 张航
     * @date 2020-09-08 17:59:45
     * @version V1.0.0
     */
    getTableData() {
      // console.log(this.searchData)
      const {
        select: { url, type = 'GET' }
      } = this.interFace;
      this.interFaceEvent(url, this.searchData, type).then(res => {
        this.tableData = res.records;
        this.pageData.total = res.total;
        // 需要变更数据
        this.$emit('update-list-data', this.tableData);
        // TODO 根据接口调整处理逻辑
        // console.log(res)
      });
    },
    /**
     * @functionName updateTableHandle
     * @param {Object} row 当前行数据
     * @description 表格编辑按钮
     * @author 张航
     * @date 2020-09-14 16:43:26
     * @version V1.0.0
     */
    updateTableHandle(row) {
      console.log(row);
      this.dialogFormCurrent = { ...row };
      this.openDialog(1);
    },
    /**
     * @functionName deleteTableHandle
     * @param {Object} row 当前行数据
     * @description 表格删除按钮
     * @author 张航
     * @date 2020-09-14 17:17:06
     * @version V1.0.0
     */
    deleteTableHandle(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = row;
        const {
          delete: { url, type = 'GET' }
        } = this.interFace;
        this.interFaceEvent(url, id, type).then(res => {
          // TODO 根据接口调整处理逻辑
          console.log(res);
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.refreshPageCurrent();
        });
      });
    },
    /**
     * @functionName openDialog
     * @param {Number} type 编辑框类型;0:新增;1:编辑;
     * @description 打开编辑框
     * @author 张航
     * @date 2020-09-08 11:38:51
     * @version V1.0.0
     */
    openDialog(type = 0) {
      this.editDialogType = type;
      this.editDialogShow = true;
    },
    /**
     * @functionName closeDialog
     * @description 关闭编辑框
     * @author 张航
     * @date 2020-09-08 14:27:02
     * @version V1.0.0
     */
    closeDialog() {
      this.editDialogType = 0;
      this.editDialogShow = false;
    },
    /**
     * @functionName saveDialogData
     * @description 保存弹框数据
     * @author 张航
     * @date 2020-09-08 18:15:14
     * @version V1.0.0
     */
    saveDialogDataHandle() {
      console.log(this.dialogForm.formData);
      const check = this.$refs.dialogForm.handleValidate();
      if (!check) {
        this.$message({
          message: '请检查表单填写内容',
          type: 'warning'
        });
        return check;
      }

      // 定义请求地址
      const _url =
        this.editDialogType === 0
          ? this.interFace.insert.url
          : this.interFace.update.url;
      // 定义请求类型
      const _type =
        this.editDialogType === 0
          ? this.interFace.insert.type
          : this.interFace.update.type;

      this.interFaceEvent(_url, this.dialogForm.formData, _type).then(res => {
        // TODO 根据接口调整处理逻辑
        console.log(res);
        this.dialogForm.handleRefresh();
        this.closeDialog();
        this.$message({
          message: '保存成功',
          type: 'success'
        });
        this.refreshPageCurrent();
      });
    },
    /**
     * @functionName cancelDialogData
     * @description 取消保存弹框数据
     * @author 张航
     * @date 2020-09-08 18:17:11
     * @version V1.0.0
     */
    cancelDialogDataHandle() {
      this.dialogForm.handleRefresh();
      this.closeDialog();
    },
    /**
     * @functionName forwardEvent
     * @param {String} name 事件名称
     * @param {*} data 数据
     * @description 转发自定义事件
     * @author 张航
     * @date 2020-09-08 14:51:05
     * @version V1.0.0
     */
    forwardEvent(name, data) {
      this.$emit(name, data);
    },
    /**
     * @functionName interFaceEvent
     * @param {String|} url 请求地址
     * @param {Object} data 请求参数
     * @param {String} type 请求类型，默认为GET
     * @return {Promise} 返回结果
     * @description 接口访问
     * @author 张航
     * @date 2020-09-14 16:14:51
     * @version V1.0.0
     */
    interFaceEvent(url, data, type = 'GET') {
      // let _url = url
      const _type = type.toLowerCase();
      // if (_type === 'get') {
      //   _url = _url + this.$tools.urlParam(data)
      // }
      return this.$api[_type](url, data);
    }
  },
  created() {},
  mounted() {
    this.init();
  }
};
</script>
<style lang='scss' scoped>
.control-box {
  margin-bottom: 10px;
}
</style>
